
<%@page import="com.opensymphony.xwork2.ActionContext"%>
<%@ page contentType='text/html; charset=UTF-8'%>
 
<%@ taglib prefix='s' uri='/struts-tags'%>

<script type='text/javascript' src='<s:url value="/plugins/jquery-1.6.2.js" />'></script>
<link rel='stylesheet' type='text/css' href='<s:url value="/plugins/jquery-ui-1.8.13/css/custom-theme/jquery-ui-1.8.13.custom.css" />' />
<link rel='stylesheet' type='text/css' href='<s:url value="/plugins/jqGrid-4.0.0/css/ui.jqgrid.css" />' />
<link rel='stylesheet' type='text/css' href='<s:url value="/plugins/jquery-autocomplete/jquery.autocomplete.css" />' />
<script type='text/javascript' src='<s:url value="/plugins/jquery-ui-1.8.13/js/jquery-ui-1.8.13.custom.min.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jqGrid-4.0.0/js/i18n/grid.locale-es.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jqGrid-4.0.0/js/jquery.jqGrid.min.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.ajaxQueue.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.autocomplete.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.bgiframe.min.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.thickbox-compressed.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/JSON.js" />'></script>

<p>
<s:if test="#session.user.rol == 'Administrador'">
<input type='button' id='editar' value='Editar' />
<input type='button' id='eliminar' value='Eliminar' />
<input type='button' id='buscar' value='Buscar' /></p>
</s:if>
<s:elseif test="#session.user == null || #session.user.rol != 'Administrador'">
<p>Introduzca el curso: <input type="text" id="icurso" size="30" /> </p>
</s:elseif>
<div id='i-gridContainer'>
    <table id='ofertaGrid'><tr><td/></tr></table>
</div>
<div id='pager'></div>
<s:if test="#session.user.rol == 'Administrador'">
<s:form action="consultarSecciones">
<p><input id="secciones" type="submit" value="Consultar secciones" disabled="disabled" /></p>
<input type="hidden" name="idoferta"/>
</s:form>
</s:if>
<s:if test="#session.user.rol == 'Estudiante' || #session.user.rol == 'Profesor'">
<p><input type="button" id="binscribir" value="Inscribir" /> </p>
<table id="tinscribir">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th class='ticurso'>Curso</th>
            <th class='tidias'>Horario</th>
			<th>Nro. de depósito </th>
            <th>Monto del depósito </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<s:form action="multiCrearInscripcion">
<p><input id="ginscribir" type="submit" value="Generar inscripción" disabled="disabled" /></p>
<input type="hidden" name="iinscribir" />
<input type="hidden" name="jinscribir" />
<input type="hidden" name="hinscribir" />
</s:form>
</s:if>
<script type='text/javascript'>
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
var w = {
      currentRow: null
    },
    ano = '2011:2011;2012:2012;2013:2013',
    periodo = 'Enero-Marzo:Enero-Marzo;Abril-Julio:Abril-Julio;Septiembre-Diciembre:Septiembre-Diciembre',
    abierto = 'SI:SI;NO:NO',
    dias = 'Lunes-Miercoles 3_30pm-5_30pm:Lunes-Miercoles 3_30pm-5_30pm;Lunes-Miercoles 3pm-5pm:Lunes-Miercoles 3pm-5pm;Martes-Jueves 3_30pm-5_30pm:Martes-Jueves 3_30pm-5_30pm;Martes-Jueves 2_30pm-6_30pm:Martes-Jueves 2_30pm-6_30pm;Sabados 8_30am-12_30pm:Sabados 8_30am-12_30pm',
    categoria = 'Idiomas:Idiomas;Capacitacion profesional:Capacitacion profesional',
    inscribir = [],
	nros = [],
    montos = [],
    nroOferExon = <%=ActionContext.getContext().getSession().get("nroOfertasExoneradas")%>,
    codOferExon = '<%=ActionContext.getContext().getSession().get("codOfertasExoneradas")%>',
    codOE = [],
    codOferCurIns = '<%=ActionContext.getContext().getSession().get("codOfertasCursosInscritos")%>'.split(','),
    buildSelect = function(options, elem, val){
        var $s = undefined === elem ? $('<select></select>') : $(elem);
        $s.empty();
        $.each(options.split(';'), function(){
            var opt = this.split(':');
            opt[0] = opt[0].replace(/_/g, ':');
            opt[1] = opt[1].replace(/_/g, ':');
            var selected = undefined !== val && opt[0] == val ? ' selected=\'selected\'' : '';
            $s.append('<option value=\'' + opt[0] + '\'' + selected + '>' + opt[1] + '</option>');
        });
        return $s;
    },
    htmlSelect = function(options){
        var $s = buildSelect(options);
        return '<select>' + $s.html() + '</select>';
    }
    formOptions = {
        addCaption: 'Agregar registro de oferta',
        editCaption: 'Modificar registro de oferta',
        modal: true,
        recreateForm: true,
        bSubmit: 'Guardar',
        bCancel: 'Cancelar',
        bClose: 'Cerrar',
        saveData: 'Se han modificado datos, desea guardar?',
        bYes: 'Sí',
        bNo: 'No',
        bExit: 'Cancelar',
        errorTextFormat: function(msg){
           msg = jQuery.parseJSON(msg.responseText);
           var r = '<ul class="jq-error-ul">';
           $.each(msg, function(key, val){
               r += '<li><b>' + key + '</b>:' + val + '</li>';
           })
           return r + '</ul>';
        }
    },
    formEditOptions = {},
    formCreateOptions = {};

$.extend(formEditOptions, formOptions, {
    url: '<s:url action="editarOferta" />',
    closeAfterEdit: true,
    afterShowForm: function(){
        buildSelect(dias, $('#dias'), $('#ofertaGrid').getCell(w.currentRow, 'dias'));
        $.each(['#curso', '#ano', '#periodo'], function(){
            var $s = $(this + '');
            $s.css('display', 'none').before($s.val());
        });
    }
});
$.extend(formCreateOptions, formOptions, {
    url: '<s:url action="crearOferta" />',
    closeAfterAdd: true,
    afterShowForm: function(){
        buildSelect(dias, $('#dias'));
        $('#curso').autocomplete('<s:url action="autocompleteCurso" />', {
            width: 260,
            selectFirst: false
        }).result(function(event, data, formatted) {
            if (data)
                $(this).parent().next().find('input').val(data[1]);
        }).focus();
    }
});

jQuery('#ofertaGrid').jqGrid({  
    url:'<s:url action="listarOferta" />',
    datatype: 'json',  
    //colNames:['Curso', 'Año', 'Período','Inscritos','Abierto','Días'],  
    colNames:['Curso','Días'],
    colModel:[  
        {
            name: 'curso',
            index: 'curso',
            width:200,
            editable: true,
            searchoptions: {
                dataInit: function(elem){
                    $(elem).autocomplete('<s:url action="autocompleteCurso" />', {
                        width: 260,
                        selectFirst: false
                    }).result(function(event, data, formatted) {
                        $(elem).change();
                    }).focus();
                }
            }
        },/*
        {
            name:'ano',
            index:'ano',
            width:40,
            editable: true,
            edittype: 'select',
            editoptions: {
                value: ano
            },
            stype: 'select',
            searchoptions: {
                dataUrl: '<s:url action="dummy" />',//No se va a usar, queremos que se llame a buildSelect
                buildSelect: function(){return htmlSelect(ano)},
                dataInit: function(elem){
                    $(elem).change();
                },
                sopt: ['eq','ne']
            }
        },
        {
            name:'periodo',
            index:'periodo',
            width:110,
            editable:true,
            edittype: 'select',
            editoptions: {
                value: periodo
            },
            stype: 'select',
            searchoptions: {
                dataUrl: '<s:url action="dummy" />',//No se va a usar, queremos que se llame a buildSelect
                buildSelect: function(){return htmlSelect(periodo)},
                dataInit: function(elem){
                    $(elem).change();
                },
                sopt: ['eq','ne']
            }
        },
        {
            name:'inscritos',
            index:'inscritos',
            width:60,
            editable: true,
            searchoptions: {
                sopt: ['eq','ne','lt','le','gt','ge']
            }
        },       
        {
            name: 'abierto',
            index: 'abierto',
            width: 70,
            editable: true,
            edittype: 'select',
            editoptions: {
                value: abierto
            },
            stype: 'select',
            searchoptions: {
                dataUrl: '<s:url action="dummy" />',//No se va a usar, queremos que se llame a buildSelect
                buildSelect: function(){return htmlSelect(abierto)},
                dataInit: function(elem){
                    $(elem).change();
                },
                sopt: ['eq','ne']
            }
        },    */    
        {
            name: 'dias',
            index: 'dias',
            width: 220,
            editable: true,
            edittype: 'select',
            editoptions: {
                value: dias
            },
            stype: 'select',
            searchoptions: {
                dataUrl: '<s:url action="dummy" />',//No se va a usar, queremos que se llame a buildSelect
                buildSelect: function(){return htmlSelect(dias)},
                dataInit: function(elem){
                    $(elem).change();
                },
                sopt: ['eq','ne']
            }
        }         
    ],
    rowNum:20,
    rowList:[10,20,50,100],
    pager: $('#pager'),
    viewrecords: true,
    sortorder: 'desc',
    caption: 'Oferta',
    height: 'auto',
    onSelectRow: function(id){
        $('#editar,#eliminar').removeAttr('disabled');
        $('#secciones').removeAttr('disabled');
        $('#binscribir')
            .removeAttr('disabled')
            .val('Inscribir ' + $('#ofertaGrid').getCell(id, 'curso'));
        w.currentRow = id;
    },
    onPaging: function(){
        $('#editar,#eliminar').attr('disabled', true);
        $('#secciones').attr('disabled', true);
        $('#binscribir').val('Inscribir').attr('disabled', true);
        w.currentRow = null;
    }
});
$('#secciones').attr('disabled', true).click( function() {
    if (null == w.currentRow){
        return;
    }
    $('input[name=idoferta]').val(w.currentRow);
});
$('#editar').attr('disabled', true).click( function() {
    if (null == w.currentRow){
        return;
    }
    $('#ofertaGrid').editGridRow(w.currentRow, formEditOptions);
});
$('#agregar').click( function() {
    $('#ofertaGrid').editGridRow('new', formCreateOptions);
});
$('#buscar').click(function(){
    $('#ofertaGrid').searchGrid({
        caption: 'Buscar...',
        Find: 'Encontrar',
        Reset: 'Resetear',
        odata : ['igual', 'no igual', 'menor', 'menor o igual','mayor','mayor o igual', 'comienza por','no comienza por','está en','no está en','termina en','no termina en','contiene','no contiene'],
        onInitializeSearch: function(){
            $('div.searchFilter select.opsel').html("<option value='AND'>Todas</option><option value='OR'>Alguna</option>");
        },
        closeAfterSearch: true,
        multipleSearch: true
    });
});
$('#eliminar').attr('disabled', true).click( function() {
    if (null == w.currentRow){
        return;
    }
    $('#ofertaGrid').delGridRow(w.currentRow, {
        url: '<s:url action="eliminarOferta" />'
    });
});
$('#icurso').keyup(function(){
    var filters = {"groupOp":"AND","rules":[],"groups":[]};
    $.each(this.value.split(/\s+/), function(key, v){
        if ("" == v) return;
        var rules = [
            {"field":"curso.nombre","op":"cn","data":v},
            {"field":"curso.descripcion","op":"cn","data":v},
            {"field":"oferta.periodo","op":"cn","data":v}
        ];
        if (!isNaN(parseInt(v))){
            rules.push({"field":"curso.costo","op":"eq","data":v});
            rules.push({"field":"curso.horas_dur","op":"eq","data":v});
            rules.push({"field":"oferta.inscritos","op":"eq","data":v});
        }
        $.each({"curso.categoria": categoria, "oferta.dias": dias}, function(fn){
            $.each(this.split(';'), function(){
                var rv = this.split(':')[0].replace(/_/g, ':');
                if (rv.toLowerCase().indexOf(v.toLowerCase()) != -1){
                    rules.push({"field":fn,"op":"eq","data":rv});
                }
            });
        });
        filters.groups.push({"groupOp":"OR","rules":rules});
        $('#binscribir').attr('disabled', true);
    });
    $("#ofertaGrid").jqGrid('setGridParam',{search:true, postData:{filters:JSON.stringify(filters)}});
    $("#ofertaGrid").trigger("reloadGrid");
});
$('#binscribir').attr('disabled', true).click(function(){
    var id = w.currentRow;
    var user_input1 = "NO";
    var user_input2 = "NO";
    var i = 0;
    //if (userInput != '' && userInput != null) {
    //alert('Y EL NUMERO DE EXONERACIONES ES '+nroOferExon);
    //alert('Y LAS OFERTAS DE EXONERACION SON '+codOferExon);
    codOE = codOferExon.split(',');
    //alert('Y LA PRIMERA OFERTA DE EXONERACION ES '+codOE[0]);
    while (i < codOferCurIns.length) {
        if (id == codOferCurIns[i]) {
            alert('Usted ya está inscrito en este curso.');
            return;
        }
        i++;
    }
    i = 0;
    var listo = false;
        while (i<nroOferExon) {
            if (codOE[i]==id) {
                alert('Usted está exonerado de pago para este curso.');
                listo = true;
            }
            i = i + 1;
        }
    if (listo!=true) {
        user_input1 = prompt('Introduzca el nro. de depósito:');
        if (user_input1==null || user_input1=='') {
            alert('Su inscripción no fue procesada por no indicar el nro. de depósito.\n ATENCIÓN: Obvie los ceros que se encuentran por delante del nro.');
        } else if (isNaN(parseInt(user_input1))) {
            alert('ERROR: El nro. de depósito debe estar formado únicamente por dígitos.');
        } else {
            //$('input[name=nroDeposito]').val(user_input1);
            user_input2 = prompt('Introduzca el monto del depósito:');
            if (user_input2==null || user_input2=='') {
                alert('Su inscripción no fue procesada por no indicar el monto del depósito.');
            } else if (isNaN(parseFloat(user_input2))) {
                alert('ERROR: El monto del depósito debe estar formado únicamente por dígitos.');
            } else {
                //$('input[name=montoDeposito]').val(user_input2);
                var datosPago = confirm('Confirme los datos de su depósito:\nNro.  '+parseInt(user_input1)+'\nBs. '+parseFloat(user_input2));
                if (datosPago==true) {
                    listo = true;
                }
            }
        }
    }
    if (listo == true) {
        img = "<img class='tdel' src='<s:url value="/css/del.jpg" />' />",
        index = inscribir.push(id);
        indexnro = nros.push(user_input1);
        //alert('Y EL NUMERO DE EXONERACIONES PARA ESTE ESTUDIANTE ES DE: '+nroOferExo);
        //alert('Y EL NUMERO DE EXONERADOS ES!!!!!!!!!!! '+nroOferExon);
        //alert('METE EL NRO '+user_input1);
        indexmonto = montos.push(user_input2);
        //alert('METE EL MONTO '+user_input2);
        $img = $(img).click(function(){
            $(this).parent().parent().remove();
            var newInscribir = [];
            var newnros = [];
            var newmontos = [];
            $.each(inscribir, function(i){
                //Eliminar este índice. Es porque el mismo curso se puede inscribir varias veces
                if (i != index){
                    newInscribir.push(inscribir[i]);
                    //newnros.push(nros[i]);
                    //newmontos.push(montos[i]);
                }
            });
            $.each(nros, function(k){
                //Eliminar este índice. Es porque el mismo curso se puede inscribir varias veces
                if (k != indexnro){
                    newnros.push(nros[k]);
                    //newnros.push(nros[i]);
                    //newmontos.push(montos[i]);
                }
            });
            $.each(montos, function(j){
                //Eliminar este índice. Es porque el mismo curso se puede inscribir varias veces
                if (j != indexmonto){
                    newmontos.push(montos[j]);
                    //newnros.push(nros[i]);
                    //newmontos.push(montos[i]);
                }
            });
            inscribir = newInscribir;
            nros = newnros;
            montos = newmontos;
            if (inscribir.length == 0){
                $('#ginscribir').attr('disabled', true);
            }
            
            $('input[name=hinscribir]').val(inscribir.join(','));
            //alert('LISTA DE INSCRIPCIONES '+inscribir.join(','));
            $('input[name=iinscribir]').val(nros.join(','));
            //alert('LISTA DE NUMEROS'+nros.join(','));
            $('input[name=jinscribir]').val(montos.join(','));
            //alert('LISTA DE MONTOS'+montos.join(','));
        });
        var body = "";
        if (user_input1=="NO") {
            body = "<tr><td></td>" +
            "<td>" + $('#ofertaGrid').getCell(id, 'curso') + "</td>" +
            "<td>" + $('#ofertaGrid').getCell(id, 'dias') + "</td>" +
            "<td>S/N</td>" +
            "<td>EXONERADO</td>" +
            "</tr>"
        } else {
            body = "<tr><td></td>" +
            "<td>" + $('#ofertaGrid').getCell(id, 'curso') + "</td>" +
            "<td>" + $('#ofertaGrid').getCell(id, 'dias') + "</td>" +
            "<td>" + user_input1 + "</td>" +
            "<td>" + user_input2 + "</td>" +
            "</tr>"
        }
        $('#tinscribir > tbody').append(
            body
        );
        $('#tinscribir > tbody tr:last td:first').append($img);
        $('input[name=hinscribir]').val(inscribir.join(','));
        //alert('LISTA DalE INSCRIPCIONES '+inscribir.join(','));
        $('input[name=iinscribir]').val(nros.join(','));
        //alert('LISTA DE NROS'+nros.join(','));
        $('input[name=jinscribir]').val(montos.join(','));
        //alert('LISTA DE MONTOS'+montos.join(','));
        $('#ginscribir').removeAttr('disabled');
        //document.formPagar.submit();     
    }
//}
    
       // document.formPagar.submit();
        
});
$(function(){
    $("#tinscribir > tbody tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
    $("#tinscribir > tbody tr:even").addClass("alt");
});
</script>
<style type="text/css">
#tinscribir tr{font-size:1.3em}
#tinscribir td{border:1px solid}
.ticurso{width: 200px}
.tiano{width: 40px}
.tiperiodo{width: 150px}
.tihorario{width: 200px}
.tiusuario{width: 100px}
.tdel{cursor:hand;cursor:pointer}

</style>